<!--Lab2新增-商店详情界面-->
<script setup lang="ts">
import {ref} from 'vue'
import {useRoute} from 'vue-router';
import {singleStoreInfo} from "../../api/store.ts";
import {parseTime} from "../../utils";
import ProductItem from "../../components/ProductItem.vue";
import CreateProduct from "../../components/CreateProduct.vue";
import CreatCoupon from "../../components/CreateCoupon.vue";

const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const address = ref('')
const score = ref()
const route = useRoute()
const storeId = Number(route.params.storeId)
const openDialog = ref(false)
const openCouponDialog = ref(false)
const role = sessionStorage.getItem("role")
const staffId = ref()
if(role == "STAFF"){
  staffId.value = sessionStorage.getItem("storeId")
}

const ownerID = ref('')
const name = ref('')
const logoUrl = ref('')
const createTime = ref('')
const commoditiesID = ref([])
getinfo()
function getinfo() {
  singleStoreInfo(storeId).then(res => {
    name.value = res.data.result.name
    logoUrl.value = res.data.result.logoURL
    createTime.value = res.data.result.createTime
    commoditiesID.value = res.data.result.commoditiesID
    score.value = res.data.result.rating
    score.value = Number(score.value.toFixed(1))
    address.value = res.data.result.address

  })
}
</script>

<template>
  <el-container>
    <el-aside width="30%" class="page-aside">
      <div class="store-header">
        <el-image :src="logoUrl" fit="cover" class="store-image"  ></el-image>
      </div>
      <el-card>
        <el-descriptions title="商店信息" :column="1">
          <el-descriptions-item label="店名">{{ name }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ address }}</el-descriptions-item>
          <el-descriptions-item label="创建日期">{{ parseTime(createTime) }}</el-descriptions-item>
        </el-descriptions>
        <el-rate
            v-model = "score"
            disabled
            show-score
            text-color="#99A9BF"
            score-template="{value}分"
            :colors="colors"></el-rate>

        <el-divider></el-divider>

        <el-form-item v-if="role == 'STAFF' && staffId == storeId">
          <el-button @click="openDialog = true">创建商品</el-button>
          <el-dialog v-model = "openDialog" title = "创建商品" width = "800">
            <CreateProduct></CreateProduct>
          </el-dialog>

          <el-button @click="openCouponDialog = true">发布优惠券</el-button>
          <el-dialog v-model = "openCouponDialog" title = "发布优惠券" width = "600" >
            <CreatCoupon :role = "role"></CreatCoupon>
          </el-dialog>
        </el-form-item>
      </el-card>
    </el-aside>

    <el-main class ="all-product-main" >
      <ProductItem class = "product-item-list" v-for="productId in commoditiesID" :key="productId" :id="productId"></ProductItem>
    </el-main>
  </el-container>
</template>


<style scoped>
.page-aside {
  background-color: #f0f2f5;
  padding: 20px;
}

.store-header {
  text-align: center;
  margin-bottom: 20px;
}

.store-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.product-item img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}


.product-info h3 {
  margin-bottom: 5px;
}

.product-info p {
  font-size: 14px;
  color: #666;
}
.product-list-title {
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.all-product-main {
  display: flex;
  flex-direction: row;
  padding: 20px;
  flex-flow: wrap;
  align-content: start;
  justify-content: start;
}
</style>


